<template>
	<view class="page" :style="{ 'min-height': h + 'px', 'padding-top': mt + 'px' }">
		<c-nav-bar title="商户入驻申请"></c-nav-bar>
		<image class="top_img" src="https://i.ringzle.com/file/20231220/ff7daae68d1d468f8cadb7b9eb563430.png"></image>
		<!-- 	<view class="apply_record" @tap="toRecord" :style="{'top':(mt+5.5)+'px'}">
			<view>申请记录</view>
			<image src="https://i.ringzle.com/file/20231214/dcf7160a426e4814999748fcfda737e0.png"></image>
		</view> -->
		<view class="box">
			<view class="v_inp">
				<view class="text"><span class="t_star">*</span>商户名称</view>
				<input type="text" v-model="dto.name" @blur="setMerchantName" @confirm="setMerchantName" placeholder="请输入"
					:placeholder-style="{ 'color': '#AAAAAA' }">
			</view>
			<view class="v_inp">
				<view class="text"><span class="t_star">*</span>企业名称</view>
				<input type="text" v-model="dto.operateProject" @blur="setEnterpriseName" @confirm="setEnterpriseName"
					placeholder="请输入" :placeholder-style="{ 'color': '#AAAAAA' }">
			</view>
			<view class="v_inp" v-if="dto.merchantType == 12">
				<view class="text"><span class="t_star">*</span>企业类型</view>
				<view class="vi_select" @tap="showEt">
					<view class="vis_text" :class="companyType ? 'vis_text_active' : ''">
						{{ companyType || '请选择' }}
					</view>
					<image src="@/static/index/steamerTicket/icon_yjt.png"></image>
				</view>
			</view>
			<view class="v_inp" v-if="dto.merchantType == 12">
				<view class="text"><span class="t_star">*</span>企业行业分类</view>
				<view class="vi_select" @tap="showEi">
					<view class="vis_text" :class="enterpriseIndustry ? 'vis_text_active' : ''">
						{{ enterpriseIndustry || '请选择' }}
					</view>
					<image src="@/static/index/steamerTicket/icon_yjt.png"></image>
				</view>
			</view>
			<view class="v_upload">
				<view class="vu_title"><span class="t_star">*</span>请上传营业执照</view>
				<!-- <view class="vu_tip">图片格式支持JPG、PNG、JPEG</view> -->
				<view class="vu_sc">
					<u-upload :fileList="licenceFileList" @afterRead="event => afterRead(event, 4)"
						@delete="event => deletePic(event, 4)" multiple :maxCount="1" :previewFullImage="true" width="100%"
						height="230rpx">
						<image src="https://i.ringzle.com/file/20231215/c307db166fa84ffd82bbef1ad9c40aa8.png" mode="widthFix"
							style="width: 360rpx;height: 230rpx;"></image>
					</u-upload>
				</view>
			</view>
			<view class="v_code">
				<view class="text"><span class="t_star">*</span>统一社会信用代码</view>
				<input type="text" v-model="dto.creditCode" @blur="setCreditCode" @confirm="setCreditCode"
					placeholder="请输入营业执照上的信用代码" :placeholder-style="{ 'color': '#AAAAAA' }">
			</view>
			<view class="v_upload">
				<view class="vu_title"><span class="t_star">*</span>请上传法人身份证照片</view>
				<!-- <view class="vu_tip">图片格式支持JPG、PNG、JPEG</view> -->
				<view class="vu_sc">
					<u-upload :fileList="idCardFrontFileList" @afterRead="event => afterRead(event, 1)"
						@delete="event => deletePic(event, 1)" multiple :maxCount="1" :previewFullImage="true" width="100%"
						height="230rpx">
						<image src="https://i.ringzle.com/file/20240306/955316cbdf574465afd660cbe38cef7e.png" mode="widthFix"
							style="width: 360rpx;height: 230rpx;"></image>
					</u-upload>
				</view>
				<view class="vu_sc">
					<u-upload :fileList="idCardVersoFileList" @afterRead="event => afterRead(event, 2)"
						@delete="event => deletePic(event, 2)" multiple :maxCount="1" :previewFullImage="true" width="100%"
						height="230rpx">
						<image src="https://i.ringzle.com/file/20240306/dde15b718bdb4a2992ba80dbdc493e41.png" mode="widthFix"
							style="width: 360rpx;height: 230rpx;"></image>
					</u-upload>
				</view>
			</view>
			<!-- 	<view class="v_upload">
				<view class="vu_title"><span class="t_star">*</span>请上传法人身份证反面照片</view>
				<view class="vu_tip">图片格式支持JPG、PNG、JPEG</view>
				<view class="vu_sc">
					<u-upload :fileList="idCardVersoFileList" @afterRead="event=>afterRead(event,2)"
						@delete="event=>deletePic(event,2)" multiple :maxCount="1" :previewFullImage="true" width="100%"
						height="230rpx">
						<image src="https://i.ringzle.com/file/20231214/56bfe9886fc24e20912deee30ceb2af3.png"
							mode="widthFix" style="width: 360rpx;height: 230rpx;"></image>
					</u-upload>
				</view>
			</view> -->
			<view class="v_inp">
				<view class="text"><span class="t_star">*</span>法人姓名</view>
				<input type="text" v-model="dto.legalPerson" @blur="setCorporateName" @confirm="setCorporateName"
					placeholder="请输入" :placeholder-style="{ 'color': '#AAAAAA' }">
			</view>
			<view class="v_inp">
				<view class="text"><span class="t_star">*</span>法人身份证号</view>
				<input type="text" v-model="dto.idCard" @blur="setCorporateIDNo" @confirm="setCorporateIDNo" placeholder="请输入"
					:placeholder-style="{ 'color': '#AAAAAA' }">
			</view>
			<view class="v_inp">
				<view class="text"><span class="t_star">*</span>企业地址</view>
				<view class="vi_select" @tap="eaShow = true">
					<view class="vis_text" :class="enterpriseAddress ? 'vis_text_active' : ''">
						{{ enterpriseAddress || '请选择所属区域' }}
					</view>
					<image src="@/static/index/steamerTicket/icon_yjt.png"></image>
				</view>
			</view>
			<view class="v_inp">
				<view class="text"><span class="t_star">*</span>详细地址</view>
				<input type="text" v-model="dto.areaDetail" @blur="setDetailsAddress" @confirm="setDetailsAddress"
					placeholder="请输入" :placeholder-style="{ 'color': '#AAAAAA' }">
			</view>
			<view class="v_upload">
				<view class="vu_title"><span class="t_star">*</span>请上传店铺门头照片</view>
				<!-- <view class="vu_tip">图片格式支持JPG、PNG、JPEG</view> -->
				<view class="vu_sc">
					<u-upload :fileList="companyFileList" @afterRead="event => afterRead(event, 3)"
						@delete="event => deletePic(event, 3)" multiple :maxCount="1" :previewFullImage="true" width="100%"
						height="230rpx">
						<image src="https://i.ringzle.com/file/20231215/c307db166fa84ffd82bbef1ad9c40aa8.png" mode="widthFix"
							style="width: 360rpx;height: 230rpx;"></image>
					</u-upload>
				</view>
			</view>
			<view class="v_upload">
				<view class="vu_title">其他可以证明企业实力的证书或奖励</view>
				<!-- <view class="vu_tip">图片格式支持JPG、PNG、JPEG</view> -->
				<view class="vu_sc">
					<u-upload :fileList="certificateFileList" @afterRead="event => afterRead(event, 5)"
						@delete="event => deletePic(event, 5)" multiple :maxCount="1" :previewFullImage="true" width="100%"
						height="230rpx">
						<image src="https://i.ringzle.com/file/20231215/c307db166fa84ffd82bbef1ad9c40aa8.png" mode="widthFix"
							style="width: 360rpx;height: 230rpx;"></image>
					</u-upload>
				</view>
			</view>
			<!-- <view class="v_download">
				<view class="vd_title">入驻协议模版下载</view>
				<view class="vd_tip">请先下载协议模版，上传双方盖章后的扫描件(PDF格式)</view>
				<view class="vd_xz" @tap="downloadFile">商户入驻协议下载</view>
			</view>
			<view class="v_upload">
				<view class="vu_title"><span class="t_star">*</span>商户入驻协议(PDF)</view>
				<view class="vu_tip">最多可以上传5个文件，每个PDF文件不大于20M</view>
				<view class="vu_sc">
					<u-upload accept="all" :fileList="agreementFileList" @afterRead="event=>afterRead(event,6)"
						@delete="event=>deletePic(event,6)" multiple :maxCount="5" :maxSize="20*1024*1024" width="100%"
						height="230rpx">
						<image src="https://i.ringzle.com/file/20231215/c307db166fa84ffd82bbef1ad9c40aa8.png"
							mode="widthFix" style="width: 360rpx;height: 230rpx;"></image>
					</u-upload>
				</view>
			</view> -->
			<view class="v_inp">
				<view class="text"><span class="t_star">*</span>管理员用户名</view>
				<input type="text" v-model="dto.adminName" @blur="setContactadminName" @confirm="setContactadminName"
					placeholder="请输入" :placeholder-style="{ 'color': '#AAAAAA' }">
			</view>
			<view class="v_inp">
				<view class="text"><span class="t_star">*</span>管理员密码</view>
				<input type="password" v-model="dto.adminPassword" @blur="setContactadminPassword"
					@confirm="setContactadminPassword" placeholder="请输入" :placeholder-style="{ 'color': '#AAAAAA' }">
			</view>
			<view class="v_inp">
				<view class="text"><span class="t_star">*</span>联系人姓名</view>
				<input type="text" v-model="dto.linkName" @blur="setContactName" @confirm="setContactName" placeholder="请输入"
					:placeholder-style="{ 'color': '#AAAAAA' }">
			</view>
			<view class="v_inp">
				<view class="text"><span class="t_star">*</span>联系人电话</view>
				<input type="tel" v-model="dto.linkPhone" @blur="setContactPhone" @confirm="setContactPhone" placeholder="请输入"
					:placeholder-style="{ 'color': '#AAAAAA' }">
			</view>
			<view class="v_yzm">
				<view class="text"><span class="t_star">*</span>验证码</view>
				<view class="vy_send">
					<input type="number" v-model="dto.verificationCode" @blur="setCode" @confirm="setCode" placeholder="请输入"
						:placeholder-style="{ 'color': '#AAAAAA' }">
					<view class="vys_btn" @tap="getCode">{{ yzmText }}</view>
				</view>
			</view>
			<view class="v_agree">
				<image @tap="dto.agree = !dto.agree" v-if="dto.agree"
					src="https://i.ringzle.com/file/20240227/9f378e2e344242c6837c5c35dd2c0ec5.png"></image>
				<image @tap="dto.agree = !dto.agree" v-else
					src="https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png"></image>
				<view class="va_text">
					已阅读并同意<span @tap="toAgreement">《商家入驻协议》</span>与<span @tap="toAgreement">《消费券电商平台合作协议》</span>
				</view>
			</view>
			<view class="v_btn" @tap="submitApply">提交申请</view>
		</view>
		<!-- 企业类型 -->
		<u-popup :show="etShow" @close="etShow = false">
			<view class="ei_items">
				<view v-for="(item, index) in enterpriseTypeList" :key="index" @tap="selectEt(item)">
					<text>{{ item.name }}</text>
					<image v-if="item.selected" src="https://i.ringzle.com/file/20231027/a21562a8f54a4fd094b43eaf8dd42ee6.png">
					</image>
					<image v-else src="https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png">
					</image>
				</view>
			</view>
		</u-popup>
		<!-- 企业行业分类 -->
		<u-popup :show="eiShow" @close="eiShow = false">
			<view class="ei_items">
				<view v-for="(item, index) in enterpriseIndustryList" :key="index" @tap="selectEi(item)">
					<text>{{ item.name }}</text>
					<image v-if="item.selected" src="https://i.ringzle.com/file/20231027/a21562a8f54a4fd094b43eaf8dd42ee6.png">
					</image>
					<image v-else src="https://i.ringzle.com/file/20231027/db588133d67548fc82dfb0d128eac9a8.png">
					</image>
				</view>
			</view>
		</u-popup>
		<!-- 企业地址 -->
		<u-picker :show="eaShow" title="企业地址" :columns="enterpriseAddressList" @cancel="eaShow = false"
			@close="eaShow = false" @confirm="eaConfirm" itemHeight="88"></u-picker>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
import {
	BaseApi
} from '@/http/baseApi.js'
var timer = null;
export default {
	data() {
		return {
			h: uni.getSystemInfoSync().windowHeight,
			mt: uni.getSystemInfoSync().statusBarHeight + 44,
			idCardFrontFileList: [],
			idCardVersoFileList: [],
			etShow: false,
			companyType: '',
			enterpriseTypeList: [],
			tidx: 0,
			enterpriseIndustry: '',
			enterpriseIndustryList: [],
			eiShow: false,
			islandList: [],
			enterpriseAddress: '',
			enterpriseAddressList: [],
			eaShow: false,
			companyFileList: [],
			licenceFileList: [],
			certificateFileList: [],
			agreementFileList: [],
			yzmCode: '',
			yzmText: '获取验证码',
			time: 60,
			agree: false,
			fileCfg: {
				1: 'idCardFrontFileList',
				2: 'idCardVersoFileList',
				3: 'companyFileList',
				4: 'licenceFileList',
				5: 'certificateFileList',
				6: 'agreementFileList'
			},
			imgCfg: {
				1: 'idCardFront',
				2: 'idCardReverse',
				3: 'storeFrontPic',
				4: 'licensePic',
				5: 'otherCertificatePic',
				6: 'settledPdf'
			},
			rules: [{
				key: 'name',
				tip: '请输入商户名称'
			},
			{
				key: 'operateProject',
				tip: '请输入企业名称'
			},
			{
				key: 'companyType',
				tip: '请选择企业类型'
			},
			{
				key: 'industryCategory',
				tip: '请选择企业行业分类'
			},
			{
				key: 'licensePic',
				tip: '请上传营业执照'
			},
			{
				key: 'creditCode',
				tip: '请输入正确的统一社会信用代码'
			},
			{
				key: 'idCardFront',
				tip: '请上传法人身份证正面照片'
			},
			{
				key: 'idCardReverse',
				tip: '请上传法人身份证反面照片'
			},
			{
				key: 'legalPerson',
				tip: '请输入法人姓名'
			},
			{
				key: 'idCard',
				tip: '请输入正确的法人身份证号'
			},
			{
				key: 'islandId',
				tip: '请选择所属区域'
			},
			{
				key: 'areaDetail',
				tip: '请输入详细地址'
			},
			{
				key: 'storeFrontPic',
				tip: '请上传店铺门头/公司照片'
			},
			// {
			// 	key: 'settledPdf',
			// 	tip: '请上传商户入驻协议(PDF)'
			// },
			{
				key: 'adminName',
				tip: '请输入管理员姓名'
			},
			{
				key: 'adminPassword',
				tip: '请输入管理员密码'
			},
			{
				key: 'linkName',
				tip: '请输入联系人姓名'
			},
			{
				key: 'linkPhone',
				tip: '请输入正确的联系人电话'
			},
			{
				key: 'verificationCode',
				tip: '请输入验证码'
			},
			{
				key: 'agree',
				tip: '请勾选协议'
			}
			],
			dto: {
				adminName: "", // 管理员用户名
				adminPassword: "", //	管理员密码
				area: "", //	区
				areaDetail: "", //详细地址
				city: "", //市
				creditCode: "", //统一社会信用代码
				idCard: "", //	法人身份证号
				industryCategory: 0, //行业分类(商户时选择): 4餐饮(暂无) 6旅行社路线 11渔家乐
				islandId: 0, //	岛屿id
				legalPerson: "", //	企业法人
				linkName: "", //联系人姓名
				linkPhone: "", //联系人号码
				merchantType: 0, //	商户类型: 2酒店 12商户
				name: "", //	商户名称
				operateProject: "", //企业名称
				province: "", //	省编码
				street: "", //	街道
				verificationCode: "", //验证码
				companyType: "", //企业类型(商家时)

				agree: false,
				idCardFront: "",
				idCardReverse: "",
				storeFrontPic: "",
				licensePic: "",
				otherCertificatePic: "",
				settledPdf: [],

			},
			picCfgs: [{ //idCardFront
				key: 'idCardFront',
				type: 1
			},
			{ //idCardReverse:
				key: 'idCardReverse',
				type: 2
			},
			{ //storeFrontPic
				key: 'storeFrontPic',
				type: 5
			},
			{ //licensePic;
				key: 'licensePic',
				type: 4
			},
			{ //otherCertificatePic;
				key: 'otherCertificatePic',
				type: 0
			},
			{ //settledPdf
				key: 'settledPdf',
				type: 6
			}
			],
			shrzType: ''
		}
	},
	async onLoad(option) {
		if (option.type) {
			this.tidx = option.type == 12 ? 0 : 1;
			this.shrzType = option.type;
			this.dto.merchantType = option.type;
		}
		await this.getEnterpriseType();
		await this.getIndustryCategory();
		await this.getAreaList();
		this.getTempData();
	},
	methods: {
		//获取企业类型
		getEnterpriseType() {
			return new Promise((resolve, reject) => {
				this.$api.post('/api/dict/getListByTypes', ['CompanyType']).then(res => {
					if (res.data.code === 0) {
						res.data.data.forEach(d => {
							this.enterpriseTypeList = [...this.enterpriseTypeList, {
								name: d.dictLabel,
								type: d.dictValue,
								selected: false
							}]
						})
						resolve()
					}
				})
			})
		},
		//获取企业行业分类
		getIndustryCategory() {
			return new Promise((resolve, reject) => {
				this.$api.post('/api/dict/getListByTypes', ['MerchantCategory']).then(res => {
					if (res.data.code === 0) {
						res.data.data.forEach(d => {
							if (d.dictLabel == '餐饮美食') {
								this.enterpriseIndustryList = [...this.enterpriseIndustryList, {
									name: d.dictLabel,
									type: d.dictValue,
									selected: false
								}]
							}
						})
						resolve()
					}
				})
			})
		},
		//获取企业地址
		getAreaList() {
			return new Promise((resolve, reject) => {
				this.$api.get('/api/scenic/selectScenicList').then(res => {
					if (res.data.code === 0) {
						this.islandList = res.data.data;
						let list = [];
						this.islandList.forEach(d => {
							list.push(d.scenicName);
						})
						this.enterpriseAddressList = [list];
						resolve()
					}
				})
			})
		},
		// toRecord() {
		// 	uni.navigateTo({
		// 		url: '/pagesMy/merchantOccupancyApplication/record'
		// 	})
		// },
		setTempData() {
			this.dto.settledPdf = "";
			if (this.shrzType == 12 && uni.getStorageSync('shrzDtoCyms')) uni.removeStorageSync('shrzDtoCyms');
			if (this.shrzType == 2 && uni.getStorageSync('shrzDtoJdms')) uni.removeStorageSync('shrzDtoJdms');
			let newDto = JSON.parse(JSON.stringify(this.dto));
			if (newDto.idCard) newDto.idCard = this.$aesTm.encrypt(newDto.idCard);
			if (newDto.legalPerson) newDto.legalPerson = this.$aesTm.encrypt(newDto.legalPerson);
			if (newDto.linkName) newDto.linkName = this.$aesTm.encrypt(newDto.linkName);
			if (newDto.linkPhone) newDto.linkPhone = this.$aesTm.encrypt(newDto.linkPhone);
			if (this.shrzType == 12) uni.setStorageSync('shrzDtoCyms', JSON.stringify(newDto));
			if (this.shrzType == 2) uni.setStorageSync('shrzDtoJdms', JSON.stringify(newDto));
		},
		getTempData() {
			if (this.shrzType == 12 && !uni.getStorageSync('shrzDtoCyms')) return
			if (this.shrzType == 2 && !uni.getStorageSync('shrzDtoJdms')) return
			let obj = null;
			if (this.shrzType == 12) obj = JSON.parse(uni.getStorageSync('shrzDtoCyms'));
			if (this.shrzType == 2) obj = JSON.parse(uni.getStorageSync('shrzDtoJdms'));
			if (!obj) return

			this.dto.id = obj.id;
			this.dto.adminName = obj.adminName;
			this.dto.adminPassword = obj.adminPassword;
			this.dto.area = obj.area;
			this.dto.areaDetail = obj.areaDetail;
			this.dto.city = obj.city;
			this.dto.creditCode = obj.creditCode;
			this.dto.idCard = this.$aesTm.decrypt(obj.idCard);
			if (obj.industryCategory) {
				let t = this.enterpriseIndustryList.find(e => e.type == obj.industryCategory);
				this.enterpriseIndustry = t ? t.name : '';
			}
			this.dto.industryCategory = obj.industryCategory;
			let ilTemp = this.islandList.find(l => l.id == obj.islandId);
			this.enterpriseAddress = ilTemp ? ilTemp.scenicName : '';
			this.dto.islandId = obj.islandId;
			this.dto.legalPerson = this.$aesTm.decrypt(obj.legalPerson);
			this.dto.linkName = this.$aesTm.decrypt(obj.linkName);
			this.dto.linkPhone = this.$aesTm.decrypt(obj.linkPhone);
			this.dto.merchantType = obj.merchantType;
			this.dto.name = obj.name;
			this.dto.operateProject = obj.operateProject;
			this.dto.province = obj.province;
			this.dto.street = obj.street;
			this.dto.verificationCode = obj.verificationCode;
			if (obj.companyType) {
				let t = this.enterpriseTypeList.find(e => e.type == obj.companyType);
				this.companyType = t ? t.name : '';
			}
			this.dto.companyType = obj.companyType;
			this.dto.agree = obj.agree;
			this.dto.idCardFront = obj.idCardFront;
			this.dto.idCardReverse = obj.idCardReverse;
			this.dto.storeFrontPic = obj.storeFrontPic;
			this.dto.licensePic = obj.licensePic;
			if (obj.otherCertificatePic) {
				this.dto.otherCertificatePic = obj.otherCertificatePic;
				this.certificateFileList.push({
					url: obj.otherCertificatePic
				});
			}
			obj.settledPdf && this.dto.settledPdf.push({
				url: obj.settledPdf
			});
			obj.storeFrontPic && this.companyFileList.push({
				url: obj.storeFrontPic
			});
			obj.idCardReverse && this.idCardVersoFileList.push({
				url: obj.idCardReverse
			});
			obj.idCardFront && this.idCardFrontFileList.push({
				url: obj.idCardFront
			});
			obj.licensePic && this.licenceFileList.push({
				url: obj.licensePic
			});
		},
		// 商户名称
		setMerchantName(e) {
			this.dto.name = e.target.value;
			this.setTempData();
		},
		// 企业名称
		setEnterpriseName(e) {
			this.dto.operateProject = e.target.value;
			this.setTempData();
		},
		// 法人姓名
		setCorporateName(e) {
			this.dto.legalPerson = e.target.value;
			this.setTempData();
		},
		//法人身份证号
		setCorporateIDNo(e) {
			this.dto.idCard = e.target.value;
			this.setTempData();
		},
		// 企业类型
		showEt() {
			this.etShow = true;
			this.enterpriseTypeList.forEach((l, i) => {
				this.$set(this.enterpriseTypeList[i], 'selected', l.name == this.companyType ? true : false);
			})
		},
		// 企业行业分类
		showEi() {
			this.eiShow = true;
			this.enterpriseIndustryList.forEach((l, i) => {
				this.$set(this.enterpriseIndustryList[i], 'selected', l.name == this.enterpriseIndustry ?
					true : false);
			})
		},
		//企业类型
		selectEt(item) {
			this.companyType = item.name;
			this.dto.companyType = item.type;
			this.etShow = false;
			this.setTempData();
		},
		// 企业行业分类选择
		selectEi(item) {
			this.enterpriseIndustry = item.name;
			this.dto.industryCategory = item.type;
			this.eiShow = false;
			this.setTempData();
		},
		// 统一社会信用代码
		setCreditCode(e) {
			this.dto.creditCode = e.target.value;
			this.setTempData();
		},
		// 企业地址
		eaConfirm(e) {
			this.enterpriseAddress = e.value[0];
			let t = this.islandList.find(l => l.scenicName == e.value);
			this.dto.islandId = t ? t.id : '';
			this.eaShow = false;
			this.setTempData();
		},
		// 详细地址
		setDetailsAddress(e) {
			this.dto.areaDetail = e.target.value;
			this.setTempData();
		},
		// 管理员用户名
		setContactadminName(e) {
			this.dto.adminName = e.target.value;
			this.setTempData();
		},
		// 管理员密码
		setContactadminPassword(e) {
			this.dto.adminPassword = e.target.value;
			this.setTempData();
		},
		// 联系人姓名
		setContactName(e) {
			this.dto.linkName = e.target.value;
			this.setTempData();
		},
		// 联系人号码
		setContactPhone(e) {
			this.dto.linkPhone = e.target.value;
			this.setTempData();
		},
		// 验证码
		setCode(e) {
			this.dto.verificationCode = e.target.value;
		},

		// 删除图片
		deletePic(event, type) {
			this[`${this.fileCfg[type]}${event.name}`].splice(event.index, 1);
			if (type < 6) this.dto[`${this.imgCfg[type]}`] = "";
			else {
				this.dto[`${this.imgCfg[type]}`] = [];
				this[`${this.fileCfg[type]}${event.name}`].forEach(f => {
					this.dto[`${this.imgCfg[type]}`].push(f.url);
				})
			}
			this.setTempData();
		},
		// 新增图片
		async afterRead(event, type) {
			let fileUrl = event.file[0].url;
			let fileType = fileUrl.split('.')[fileUrl.split('.').length - 1];
			if (type < 6) {
				if (!['jpg', 'png', 'jpeg'].includes(fileType.toLowerCase())) return this.uToastShow('图片格式仅支持JPG、PNG、JPEG');
				if (type == 4) {
					let fileSize = (event.file[0].size || 0) / 1024 / 1024;
					if (fileSize > 10) return this.uToastShow('营业执照图片大小不得大于10M');
				}
			} else {
				let fileSize = (event.file[0].size || 0) / 1024 / 1024;
				if (fileSize > 20) return this.uToastShow('每个PDF文件大小不得大于20M');
				if (!['pdf'].includes(fileType)) return this.uToastShow('仅支持上传PDF文件');
			}

			// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
			let lists = [].concat(event.file);
			let fileListLen = this[`${this.fileCfg[type]}${event.name}`].length;
			lists.map((item) => {
				this[`${this.fileCfg[type]}${event.name}`].push({
					...item,
					status: 'uploading',
					message: '上传中'
				})
			})
			for (let i = 0; i < lists.length; i++) {
				const result = await this.uploadFilePromise(lists[i].url, type);
				let item = this[`${this.fileCfg[type]}${event.name}`][fileListLen]
				this[`${this.fileCfg[type]}${event.name}`].splice(fileListLen, 1, Object.assign(item, {
					status: 'success',
					message: '',
					url: result
				}))
				fileListLen++
			}

			if (type < 6) this.dto[`${this.imgCfg[type]}`] = this[`${this.fileCfg[type]}${event.name}`][0].url;
			else {
				this.dto[`${this.imgCfg[type]}`] = [];
				this[`${this.fileCfg[type]}${event.name}`].forEach(f => {
					this.dto[`${this.imgCfg[type]}`].push(f.url);
				})
			}
			this.setTempData();
		},
		uploadFilePromise(url, type) {
			return new Promise((resolve, reject) => {
				let a = uni.uploadFile({
					url: BaseApi + '/oss/file/aliyunUpload?access_token=' + (uni.getStorageSync(
						'access_token') || ''),
					filePath: url,
					name: 'file',
					success: (res) => {
						setTimeout(() => {
							let data = JSON.parse(res.data);
							if (type == 2 || type == 4) {
								let itype = type == 2 ? 1 : (type == 4 ? 2 : '');
								this.$api.get('/api/register/getCodeByImageUrl?imageUrl=' +
									data.data.url + '&type=' + itype).then(result => {
										if (result.data.code === 0) {
											if (type == 2) this.dto.idCard = result
												.data.data;
											if (type == 4) this.dto.creditCode = result
												.data.data;
										} else this.uToastShow(result.data.msg);
									})
							}
							resolve(data ? data.data.url : '');
						}, 1000)
					}
				});
			})
		},
		downloadFile() {
			uni.showLoading({
				title: '下载中...'
			})
			uni.downloadFile({
				url: 'https://i.ringzle.com/file/20240115/b9520f137f4e47bd9638e0860f92b823.pdf',
				success: (res) => {
					if (res.statusCode === 200) {
						uni.saveFile({
							tempFilePath: res.tempFilePath,
							success: (result) => {
								uni.hideLoading();
								uni.showModal({
									title: '温馨提示',
									content: '文件已保存：' + result.savedFilePath,
									cancelText: '我知道了',
									confirmText: '打开文件',
									success: function (resu) {
										if (resu.confirm) {
											uni.openDocument({
												filePath: result
													.savedFilePath,
												success: (sus) => {

												}
											})
										}
									}
								});
							}
						})

						// uni.getFileSystemManager().saveFile({
						// 	tempFilePath: res.tempFilePath.toString(),
						// 	success: result => {
						// 		this.uToastShow('已下载并保存到本地');
						// 	}
						// })
					} else this.uToastShow('下载失败');
				}
			});
		},
		selectMerchantType(idx, type) {
			this.tidx = idx;
			this.dto.merchantType = type;
		},
		//获取验证码
		getCode() {
			if (this.yzmText != '获取验证码') return;
			if (!/^1([3589]\d|4[5-9]|6[1-2,4-7]|7[0-8])\d{8}$/.test(this.dto.linkPhone)) return this.uToastShow(
				'请输入正确的联系人电话');
			this.$api.get('/api/register/getCaptcha/' + this.dto.linkPhone).then(res => {
				if (res.data.code === 0) {
					this.uToastShow('发送成功')
					this.yzmCode = res.data.data;
					this.yzmText = this.time + 's后重新获取';
					this.timer = setInterval(() => {
						this.time--;
						this.yzmText = this.time + 's后重新获取';
						if (this.time == 0) {
							this.yzmText = '获取验证码';
							this.time = 60;
							clearInterval(this.timer);
						}
					}, 1000)
				} else this.uToastShow(res.data.msg);
			})
		},
		toAgreement() {

		},
		//提交申请
		submitApply() {
			let canApply = true;

			this.rules.forEach(r => r.yz = true);
			let idx = this.rules.findIndex(r => r.key == 'industryCategory');
			let idx2 = this.rules.findIndex(r => r.key == 'companyType');
			if (this.dto.merchantType == 2) {
				this.rules[idx].yz = false;
				this.rules[idx2].yz = false;
			} else {
				this.rules[idx].yz = true;
				this.rules[idx2].yz = true;
			}
			let rules = this.rules.filter(r => r.yz == true);

			for (var i = 0; i < rules.length; i++) {
				if (!this.dto[`${rules[i].key}`] ||
					(!/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(this.dto[
						`${rules[i].key}`]) && rules[i].key == 'idCard') ||
					(!/^[0-9A-HJ-NPQRTUWXY]{2}\d{6}[0-9A-HJ-NPQRTUWXY]{10}$/.test(this.dto[`${rules[i].key}`]) &&
						rules[i].key == 'creditCode') ||
					(!/^1([3589]\d|4[5-9]|6[1-2,4-7]|7[0-8])\d{8}$/.test(this.dto[`${rules[i].key}`]) && rules[i]
						.key == 'linkPhone') ||
					this.dto[`${rules[i].key}`].length == 0) {
					this.uToastShow(rules[i].tip);
					canApply = false;
					return;
				}
			}
			if (this.dto.verificationCode != this.yzmCode) return this.uToastShow('验证码输入有误');
			if (canApply) {
				this.dto.settledPdf = "";
				let newDto = JSON.parse(JSON.stringify(this.dto));
				newDto.idCard = this.$aesTm.encrypt(newDto.idCard);
				newDto.legalPerson = this.$aesTm.encrypt(newDto.legalPerson);
				newDto.linkName = this.$aesTm.encrypt(newDto.linkName);
				newDto.linkPhone = this.$aesTm.encrypt(newDto.linkPhone);

				this.$api.post('/api/register/merchantSettled', newDto).then(res => {
					if (res.data.code == 0) {
						this.uToastShow('申请成功');
						setTimeout(() => {
							if (this.shrzType == 12) uni.removeStorageSync('shrzDtoCyms');
							if (this.shrzType == 2) uni.removeStorageSync('shrzDtoJdms');
							uni.navigateTo({
								url: '/pagesMy/merchantOccupancyApplication/record'
							})
						}, 1500)
					} else this.uToastShow(res.data.msg);
				})
			}
		},
		uToastShow(message) {
			this.$refs.uToast.show({ message })
		}
	}
}
</script>
<style lang="less">
.u-upload__deletable {
	width: 30rpx !important;
	height: 30rpx !important;
}

// .u-icon__icon {
// 	font-size: 24rpx !important;
// 	top: 8rpx !important;
// }

.uicon-close {
	font-size: 24rpx !important;
	top: 8rpx !important;
}
</style>

<style scoped lang="less">
.page {
	background: #6CA8FA;
	position: relative;
	padding-bottom: 18rpx;

	.top_img {
		width: 100%;
		height: 413rpx;
		position: relative;
		z-index: 1;
	}

	.apply_record {
		width: 172rpx;
		height: 58rpx;
		// background: linear-gradient(270deg, #4CB8FF 0%, #5093FE 100%);
		background: #FFB200;
		border-radius: 100rpx 0rpx 0rpx 100rpx;
		display: flex;
		align-items: center;
		padding-left: 20rpx;
		box-sizing: border-box;
		position: absolute;
		right: 0;
		z-index: 3;

		view {
			font-size: 28rpx;
			font-family: PingFangHK, PingFangHK;
			font-weight: 400;
			color: #FFFFFF;
		}

		image {
			width: 24rpx;
			height: 24rpx;
		}
	}

	.box {
		width: calc(100% - 48rpx);
		margin: -96rpx 24rpx 0;
		padding: 0 30rpx 105rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 8rpx;
		position: relative;
		z-index: 2;

		.t_star {
			color: red;
		}

		.v_inp {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 35rpx 0;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;

			.text,
			text {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #666666;
				width: 200rpx;
			}

			input {
				width: calc(100% - 200rpx);
				text-align: right;
				border: none;
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #1C1E41;
			}

			.vi_text {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #1C1E41;
				text-align: right;
			}

			.vi_select {
				display: flex;
				align-items: center;

				.vis_text {
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #AAAAAA;

					&.vis_text_active {
						color: #1C1E41;
					}
				}

				image {
					width: 30rpx;
					height: 30rpx;
					margin-left: 8rpx;
				}
			}
		}

		.v_upload {
			padding: 36rpx 0 30rpx;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;

			.vu_title {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 32rpx;
			}

			.vu_tip {
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #AAAAAA;
				line-height: 32rpx;
				margin: 20rpx 0;
			}

			.vu_sc {
				width: 100%;
				margin-top: 36rpx;
			}
		}

		.v_radio {
			padding: 36rpx 0 30rpx;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;

			&>.text {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #666666;
				margin-bottom: 6rpx;
			}

			.vr_item {
				display: flex;
				align-items: center;
				margin-top: 24rpx;

				.cri_l {
					width: 208rpx;
					display: flex;
					align-items: center;

					image {
						width: 38rpx;
						height: 38rpx;
					}

					text {
						font-size: 30rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						color: #1C1E41;
						margin-left: 20rpx;
					}
				}

				.cri_r {
					width: calc(100% - 208rpx);
					font-size: 24rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #88919D;
					line-height: 32rpx;
				}
			}
		}

		.v_code {
			padding: 35rpx 0 48rpx;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;

			.text,
			text {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #666666;
			}

			input {
				border: none;
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #1C1E41;
				margin-top: 29rpx;
			}
		}

		.v_download {
			padding: 40rpx 0 20rpx;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;

			.vd_title {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #666666;
			}

			.vd_tip {
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FF7D01;
				line-height: 26rpx;
				margin-top: 20rpx;
			}

			.vd_xz {
				width: 280rpx;
				height: 80rpx;
				background: #007A69;
				border-radius: 12rpx;
				line-height: 80rpx;
				text-align: center;
				margin-top: 22rpx;
				font-size: 26rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
			}
		}

		.v_yzm {
			padding: 35rpx 0;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&>.text {
				font-size: 30rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #666666;
			}

			.vy_send {
				width: calc(100% - 120rpx);
				display: flex;
				align-items: center;
				justify-content: flex-end;

				input {
					width: calc(100% - 246rpx);
					border: none;
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					color: #1C1E41;
					text-align: right;
				}

				.vys_btn {
					width: 226rpx;
					padding: 12rpx 0;
					box-sizing: border-box;
					border-radius: 28rpx;
					background: #007A69;
					margin-left: 20rpx;
					font-size: 28rpx;
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					text-align: center;
					color: #FFFFFF;
				}
			}
		}

		.v_agree {
			margin-top: 51rpx;
			display: flex;
			justify-content: space-between;

			image {
				width: 40rpx;
				height: 40rpx;
			}

			.va_text {
				width: calc(100% - 53rpx);
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #1C1E41;
				line-height: 40rpx;
				margin-top: -3rpx;

				span {
					color: #007A69;
				}
			}
		}

		.v_btn {
			width: 100%;
			height: 88rpx;
			background: #007A69;
			border-radius: 44rpx;
			margin-top: 68rpx;
			font-size: 32rpx;
			font-family: PingFang-SC, PingFang-SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			letter-spacing: 2px;
		}
	}

	.ei_items {
		width: 100%;
		padding: 0 30rpx 89rpx;
		box-sizing: border-box;

		&>view {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 31rpx 0;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;

			text {
				font-size: 28rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #333333;
			}

			image {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}

	::v-deep.u-upload__wrap {
		justify-content: center;
	}

	::v-deep.u-upload__wrap__preview {
		width: 360rpx;
	}
}
</style>